<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" />
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            @if (showToc) {
                <core-button-with-spinner [loading]="loadingToc">
                    @if (toc.length) {
                        <ion-button fill="clear" (click)="openToc()" [ariaLabel]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
                            <ion-icon name="fas-list-ul" slot="icon-only" aria-hidden="true" />
                        </ion-button>
                    }
                </core-button-with-spinner>
            }
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="loaded">
        @if (loaded) {
            <core-iframe id="scorm_object" [src]="src" [iframeWidth]="scormWidth" [iframeHeight]="scormHeight"
                [showFullscreenOnToolbar]="true" [autoFullscreenOnRotate]="true" />
        }

        @if (!src && errorMessage) {
            <p>{{ errorMessage | translate }}</p>
        }
    </core-loading>

    @if (loaded && navigationItems.length > 1) {
        <core-navigation-bar collapsible-footer appearOnBottom [items]="navigationItems" (action)="loadSco($event)" slot="fixed" />
    }
</ion-content>
